<template>
  <div class="wx" id="wx">
    <mt-swipe :auto="0" >
      <mt-swipe-item>
        <div class="guide-Enconer">
          <div>
            <img src="static/images/guide-img/13_03.png" alt=""/>
          </div>
          <div>
            <h3>英语角</h3>
            <p>加入英语角即，可畅快聊天</p>
          </div>
        </div>
      </mt-swipe-item>
      <mt-swipe-item>
        <div class="guide-translate">
          <div>
            <img src="static/images/guide-img/12_03.png" alt=""/>
          </div>
          <div>
            <h3>翻译</h3>
            <p>在线输入即可翻译</p>
          </div>
        </div>
      </mt-swipe-item>
      <mt-swipe-item>
        <div class="guide-speak">
          <div>
            <img src="static/images/guide-img/14_03.png" alt=""/>
          </div>
          <div>
            <h3>流利说</h3>
            <p>热门精品影视，边学边玩，更有趣</p>
          </div>
          <router-link to="/common" class="guide-beginDiv">开启体验</router-link></div>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { Swipe, SwipeItem } from 'mint-ui';
  import 'mint-ui/lib/style.css';
  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);

    export default{
      name: 'wx'
//      mounted:function(){
//        console.log($router)
//      }
    }
</script>
<style scoped>
  .wx{
    margin-top: -40px;
    /*padding-top: 60px;*/
    width: 100%;
    height: 577px;
    /*padding-bottom: 10%;*/
    background-color: #FCFCFC;
  }

  .guide-Enconer,.guide-translate,.guide-speak{
    display: flex;
    flex-direction: column;
    align-content: center;
    background-color: #FCFCFC;
    padding:60px 0 50px;
    color:#8E8E8E;
    height: 100%;
  }
  .guide-Enconer img,
  .guide-translate img,
  .guide-speak img{
    width: 70%;
  }
  .guide-Enconer h3,
  .guide-translate h3,
  .guide-speak h3{
    font-size: 24px;
    margin: 50px 0 40px 0;
  }
  .guide-Enconer p,
  .guide-translate p,
  .guide-speak p{
    font-size: 20px;
    margin: 0;
  }
  .guide-beginDiv{
    width: 25%;
    margin: 40px auto;
    /*margin-top: 50px;*/
    color: #8E8E8E;
    font-size: 16px;
    padding: 8px 10px ;
    border-radius: 30px;
    border: 1px solid #8E8E8E;
  }

</style>
